<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>编辑商品信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="back">返回</el-button>
      </div>
      <el-form ref="form" :model="editForm" :rules="rules" label-width="140px">
        <el-form-item label="商品品牌">
          <el-select v-model="brand" value="brand" value-key="id"  placeholder="请选择品牌">
            <el-option v-for="(item,index) in brandList" :key="index" :label="item.name" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="商品分类">

          <el-select v-model="goodsType" value-key="id" placeholder="请选择商品分类" >
            <el-option v-for="(item,index) in goodsTypeList" :key="index" :label="item.name" :value="item"/>
          </el-select>

        </el-form-item>
        <el-form-item label="	SKU名称" prop="name">
          <el-input v-model="editForm.name" style="width: 300px"/>
        </el-form-item>
        <el-form-item
          label="价格"
          prop="price"
        >
          <el-input v-model.number="editForm.price" type="price" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="规格" prop="spec">
          <el-input v-model="editForm.spec" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="editForm.status">
            <el-radio label="1">正常</el-radio>
            <el-radio label="2">下架</el-radio>
            <el-radio label="3">删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            action="/oss/img"
            :file-list="fileList"
            list-type="picture-card"
            name="object"
            :on-success="uploadSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus"/>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImg" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布</el-button>
          <el-button @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {queryGoodInfo, updateGoodInfo, getGoodTypeList} from '@/api/goods'
import {getBranList} from '@/api/goodBrand'

export default {
  name: 'EditGoodInfo',
  data() {
    return {
      // 品牌信息
      brandList: [],
      brand: {id: '', name: ''}
      ,
      // 商品分类
      goodsTypeList: [],
      goodsType: {id: '', name: ''},
      editForm: {},
      //  商品图片列表
      fileList: [],
      // 预览图片地址
      dialogImg: '',
      dialogVisible: false,
      rules: {
        price: [
          {required: true, message: '价格不能为空'},
          {type: 'number', message: '价格必须为数字值'}
        ],
        name: [
          {required: true, message: '商品名称不能为空'}
        ]
      }
    }
  },
  watch: {
    $route() {
      console.info('path changed')
      this.getData()
    }
  },
  created() {
    this.getData()

  },
  methods: {
    // 加载品牌信息
    loadBrand() {
      getBranList().then(res => this.brandList = res.data)
    },
    // 加载分类信息
    loadGoodsType() {
      getGoodTypeList().then(res => this.goodsTypeList = res.data)
    },
    //  获取商品详细信息
    getData() {
      const id = this.$route.query.id
      queryGoodInfo(id).then(res => {
        this.editForm = res.data

        // 价格分转为元
        this.editForm.price = this.editForm.price / 100

        // 商品图片处理
        res.data.images.split(',').forEach(imgUrl => {
          if (imgUrl !== '') {
            this.fileList.push({url: imgUrl})
          }
        })

        // 品牌选中
        this.brand.id = res.data.brandId;
        this.brand.name = res.data.brandName;

        // 品牌选中
        this.goodsType.id =res.data.categoryId;
        this.goodsType.name = res.data.categoryName;

        this.loadBrand();
        this.loadGoodsType();
      })
    },
    //  返回
    back() {
      this.$store.dispatch('tagsView/delVisitedView', this.$route)
      this.$router.push('/goods/goodinfo')
    },
    //  上传成功时回调
    uploadSuccess(file, fileList) {
      this.fileList.push({url: fileList.response.data})
    },
    handlePictureCardPreview(file) {
      this.dialogVisible = true
      this.dialogImg = file.url
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    //  提交编辑信息
    onSubmit() {
      //  获取当前页面ID
      const id = this.$route.query.id
      //  调用编辑商品信息接口
      updateGoodInfo({
        id: id,
        brandName: this.brand.name,
        brandId: this.brand.id,
        categoryName: this.goodsType.name,
        categoryId: this.goodsType.id,
        images: this.fileList.map(item => item.url).join(','),
        name: this.editForm.name,
        price: this.editForm.price * 100,
        spec: this.editForm.spec,
        status: this.editForm.status
      }).then(() => {
        this.$message.success('更新成功')
        this.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  padding: 20px;
}
</style>
